<template>
  <div v-if="nowIndex === numIndex && hfIndex">
    <div class="plk">
      <div class="user-tx">
        <img src="http://mcgamehome.love/img2/BIL/4.jpeg">
      </div>
      <div class="plsrk">
        <div class="loginSpanBox">
        <textarea ref="textareaF" @click="showEom" v-model="list.contentUp.content" rows="2" cols="" class="commentInput fontHt" :class="[{commentInputActive:textFocus},{textInputActive:isToken}]" :placeholder="isShow">
      </textarea>
          <div class="loginSpan" v-if="isToken"><span class="fontHt">评论暂未实现</span></div>
        </div>
        <div class="faceListBox" ref="eomBox" @click="showEom" :class="{textInputActive:isToken}">
          <svg viewBox="0 0 24 24" ref="eomBoxIcon" @click="showEom"
               width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"
               stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
            <line x1="9" y1="9" x2="9.01" y2="9"></line>
            <line x1="15" y1="9" x2="15.01" y2="9"></line>
          </svg>
        </div>
      </div>
      <div class="plfb">
        <button type="button" class="commentUpButton skyblue fontHt" :class="{stopClick:isToken}" @click="contentPut">展示</button>
      </div>
    </div>
    <div class="eom-box-all-waike show-box-m-d" :class="{None:IconIn}" ref="eomBoxOne" @click.stop>
      <div class="eom-box-all">
        <div class="eom-name">
          <span class="fontHt" ref="eomTitle">emo表情</span>
        </div>
        <div class="eom-show">
      <span class="eom-span fontHt eom-span-show" v-for="(eom,index) in eomOne" :key="index" @click="spanUp">
        <span class="fontHt">{{eom.eomIcon}}</span>
      </span>
        </div>
        <div class="eom-table">
          <div class="eom-table-one" type="buttom" @click="clickEom(1)" :class="{backW:eomQH === 1}">
            😋
          </div>
          <div class="eom-table-one" type="buttom" @click="clickEom(2)" :class="{backW:eomQH === 2}">
            <span class="fontHt">:-)</span>
          </div>
          <div class="eom-table-bili-one" type="buttom" @click="clickEom(3)" :class="{backW:eomQH === 3}">
            <img src="http://mcgamehome.love/img/eom/3087d273a78ccaff4bb1e9972e2ba2a7583c9f11.png">
          </div>
          <div class="eom-table-bili-one" type="buttom" @click="clickEom(4)" :class="{backW:eomQH === 4}">
            <img src="http://mcgamehome.love/img/eom/5637557320fbfb3292307735f0b8acd53a791241.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useCookies} from "@vueuse/integrations/useCookies";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

const store = useStore()
let loginIndex = computed(() => {return store.state.loginIndex})
const isShow = ref(null)
const name = ref(null)
const nowIndex = ref(null)
const numIndex = ref(null)
const hfIndex = ref(false)
const parents = ref(null)
const props = defineProps({
  isShow:String,
  nowIndex:Number,
  numIndex:Number,
  hfIndex:Boolean,
  parents:Number
})
watch(()=>props,()=>{
  isShow.value = '回复 '+props.isShow
  name.value = props.isShow
  nowIndex.value = props.nowIndex
  numIndex.value = props.numIndex
  hfIndex.value = props.hfIndex
  parent.value = props.parents
},{deep:true,immediate:true})
const textareaF = ref(null)  //评论框
const textFocus = ref(false)  //评论框状态
const eomBox = ref(null)
const eomBoxIcon = ref(null)
const eomBoxOne = ref(null)
const blurIndex = ref(null)  //光标位置
const blurIndexEnd = ref(null)
const IconIn = ref(true)
const content = ref('')
const eomOne = ref(null)  //eom表情显示列表
const eomQH = ref(1)   //eom列表切换
const isToken = ref(false)
const cookie = useCookies()
let videoId = useRoute().query.look
const list = reactive({
  eomIndex:[],
  contentUp:{
    parentId:0,
    linkName:'测试',
    content:'',
    time:null,
    boolChild:0,
    rootId:0,
    linkImg:'/img/userImg/user10.webp',
    tipNum:0,
    artId:null,
    likeNum:0,
    aiteName:''
  }
})

const eomList = [{id:1,eomIcon:'🙃'},{id:2,eomIcon:'😁'},{id:3,eomIcon:'😂'},{id:4,eomIcon:'🤣'},{id:5,eomIcon:'😃'},{id:6,eomIcon:'😄'},
  {id:7,eomIcon:'😅'},{id:8,eomIcon:'😆'},{id:9,eomIcon:'😉'},{id:10,eomIcon:'😊'},{id:11,eomIcon:'😋'},{id:6,eomIcon:'😎'},
  {id:13,eomIcon:'😍'},{id:14,eomIcon:'😘'},{id:15,eomIcon:'🥰'},{id:16,eomIcon:'🐸'},{id:17,eomIcon:'🤗'},{id:18,eomIcon:'🤩'},
  {id:19,eomIcon:'🤔'},{id:20,eomIcon:'🤨'},{id:21,eomIcon:'🙄'},{id:22,eomIcon:'😏'},{id:23,eomIcon:'😣'},{id:24,eomIcon:'😥'},
  {id:25,eomIcon:'😮'},{id:26,eomIcon:'🤐'},{id:27,eomIcon:'🧠'},{id:28,eomIcon:'😪'},{id:29,eomIcon:'😫'},{id:30,eomIcon:'😴'},
  {id:31,eomIcon:'😜'},{id:32,eomIcon:'😓'},{id:33,eomIcon:'🤤'},{id:34,eomIcon:'😢'},{id:35,eomIcon:'🥶'},{id:36,eomIcon:'😭'},
  {id:37,eomIcon:'🐔'},{id:38,eomIcon:'😰'},{id:39,eomIcon:'👀'},{id:40,eomIcon:'🥵'},{id:41,eomIcon:'🤡'},{id:42,eomIcon:'🐮'},
  {id:43,eomIcon:'🤢'},{id:44,eomIcon:'🤮'},{id:45,eomIcon:'😨'},{id:46,eomIcon:'😬'},{id:47,eomIcon:'😡'},{id:48,eomIcon:'😇'}]
const eomY = ref([{id:1,eomIcon:'ヾ(•ω•`)o'},{id:2,eomIcon:'\(￣︶￣*\))'},{id:3,eomIcon:'( ´･･)ﾉ(._.`)'},{id:4,eomIcon:'(｡･∀･)ﾉﾞ嗨'},{id:5,eomIcon:'\(@^0^@)/'},{id:6,eomIcon:'☆⌒(*＾-゜)v THX!!'},
  {id:7,eomIcon:'✪ ω ✪'},{id:8,eomIcon:'(╯▽╰ )好香~~'},{id:9,eomIcon:'谢啦!!☆⌒(*＾-゜)v'},{id:10,eomIcon:'◑﹏◐'},{id:11,eomIcon:'(ಥ _ ಥ)'},{id:6,eomIcon:'(⓿_⓿)'},
  {id:13,eomIcon:'(ง •_•)ง'},{id:14,eomIcon:'(✿◕‿◕✿)'},{id:15,eomIcon:'(/ω＼*)……… (/ω•＼*)'},{id:16,eomIcon:'(o′┏▽┓｀o) '},{id:17,eomIcon:'ԅ(¯﹃¯ԅ)'},{id:18,eomIcon:'（；´д｀）ゞ'},
  {id:19,eomIcon:'(っ °Д °;)っ'},{id:20,eomIcon:'( *^-^)ρ(*╯^╰)'},{id:21,eomIcon:'(;´༎ຶД༎ຶ`)'},{id:22,eomIcon:'┭┮﹏┭┮'},{id:23,eomIcon:'(╬▔皿▔)╯'},{id:24,eomIcon:'(～￣(OO)￣)ブ'},
  {id:25,eomIcon:'(～￣(OO)￣)ブ'},{id:26,eomIcon:'o((>ω< ))o'},{id:27,eomIcon:'(￣ε(#￣)'},{id:28,eomIcon:'┗|｀O′|┛'},{id:29,eomIcon:'(╯‵□′)╯︵┻━┻'},{id:30,eomIcon:'ಠಿ_ಠ'},
  {id:31,eomIcon:'(＠_＠;)'},{id:32,eomIcon:'(๐॔˃̶ᗜ˂̶๐॓)'},{id:33,eomIcon:'┌( ´_ゝ` )┐'},{id:34,eomIcon:'(◎﹏◎)'},{id:35,eomIcon:'┏┛墓┗┓...(((m -__-)m'},{id:36,eomIcon:'∑( 口 ||'},
  {id:37,eomIcon:'(°ー°〃)'},{id:38,eomIcon:':-)'},{id:39,eomIcon:'(＃°Д°)'}])

// watch(()=>loginIndex,()=> {
//   if (store.state.loginIndex !== undefined){
//     isToken.value = false
//   }else {
//     isToken.value = true
//   }
// },{deep:true,immediate:true})

onMounted(() => {
  // isToken.value = !cookie.get("user-token");
  list.contentUp.artId = videoId
})
const emit = defineEmits(['getContentOne'])
function contentPut() {
  if (nowIndex.value === numIndex.value && hfIndex){
    list.contentUp.parentId = parents.value
    list.contentUp.rootId = nowIndex.value
    list.contentUp.artId = videoId
    list.contentUp.time = timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
    if (nowIndex.value !== parent.value){
      list.contentUp.boolChild = 1
      list.contentUp.aiteName = ''+name.value+''
    }else {
      list.contentUp.boolChild = 0
      list.contentUp.aiteName = ''
    }
    emit('getContentOne',list.contentUp)
    // console.log(list.contentUp)
    list.contentUp.content = ''
  }else {

  }
}

function clickEom(i){
  if (i === 1){
    eomOne.value = eomList
    eomQH.value = i
  }else if (i === 2){
    eomOne.value = JSON.parse(JSON.stringify(eomY.value))
    eomQH.value = i
  }
}
function eomShow() {
  eomBoxOne.value.style.left = ''+eomBox.value.style.offsetLeft+'px'
}

function spanUp(e) {
  textareaF.value.focus()
  blurIndex.value = textareaF.value.selectionStart
  blurIndexEnd.value = textareaF.value.selectionEnd
  if (list.contentUp.content === undefined || list.contentUp.content === ''){
    list.contentUp.content = e.target.innerText
    blurIndex.value = textareaF.value.selectionStart + e.target.innerText.length
    blurIndexEnd.value = textareaF.value.selectionEnd + e.target.innerText.length

  }else {
    list.contentUp.content = list.contentUp.content.substring(0,blurIndex.value) + e.target.innerText + list.contentUp.content.substring(blurIndexEnd.value)
    textareaF.value.focus()
    textareaF.value.setSelectionRange(blurIndexEnd.value + e.target.innerText.length,blurIndexEnd.value + e.target.innerText.length)
  }

}
function showEom(e){
  clickEom(eomQH.value)
  document.addEventListener('click', (e) => {
    if (eomBox.value===(e.target) || eomBoxIcon.value===(e.target)){
      eomBoxOne.value.style = 'left:'+eomBox.value.offsetLeft+'px'
      IconIn.value = false
    }
    if (textareaF.value===(e.target) || eomBox.value===(e.target) || eomBoxIcon.value===(e.target)){
      textFocus.value = true
      textareaF.value.focus()
      blurIndex.value = textareaF.value.selectionStart
      blurIndexEnd.value = textareaF.value.selectionEnd
      eomShow()
    }else {
      textFocus.value = false
      IconIn.value = true
    }
  })
}
function timestampToTime(times) {
  let time = times[1]
  let mdy = times[0]
  mdy = mdy.split('/')
  let month = parseInt(mdy[0]);
  let day = parseInt(mdy[1]);
  let year = parseInt(mdy[2])
  return year + '-' + month + '-' + day + ' ' + time
}
</script>

<style lang="less" scoped>
.loginSpanBox{
  position: relative;
}
.loginSpan{
  position: absolute;
  padding-top: 8px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.p-c{
  cursor: pointer;
}
.contentNum{
  font-size: 25px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.contentTitle{
  color: #9499A0;
  font-size: 20px;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.mar-l-r-10{
  margin: 0 10px;
}
.contentController{
  color: #9499A0;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.eom-span-show:hover{
  box-shadow: 0 0.5px 3px #76767699;
}
.show-box-m-d{
  box-shadow: 0 0 10px 3px rgba(0, 0, 0.34, .035);
}
.eom-box-all{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
}
.eom-box-all-waike{
  width: 330px;
  height: 200px;
  border-radius: 4px;
  background-color: #fff;
  z-index: 10;
  overflow: hidden;
  position: absolute;
}
.faceListBox{
  width: 34px;
  display: flex;
  margin: 5px 0 ;
  border: 1px solid #F1F2F3;
  border-radius: 4px;
  //flex-wrap: wrap;
  justify-content: center;
  //pointer-events: none;
  padding: 5px 0;
  color: #9499A0;
}
.moreHF{
  margin-bottom: 5px;
  font-size: 14px;
}
.moreHF2:hover{
  color: #2d8cf0;
  cursor: pointer;
}
.PlEnd{
  display: flex;
  justify-content: center;
  align-content: center;
}
.contentTime{
  font-size: 14px;
  line-height: 24px;
}
.aite{
  color: #2d8cf0;
}
.contentWaike{
  width: 100%;
}
.contentBodyBox{
  display: flex;
  flex-direction: column;
}
.moreContent{
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.contentBody{
  font-size: 14px;
  margin-left: 10px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 24px;
  vertical-align: baseline;
}
.userName{
  display: inline-flex;
  align-items: center;
  margin-right: 9px;
  line-height: 24px;
  vertical-align: baseline;
  white-space: nowrap;
}
/* 按钮颜色 */
.skyblue{
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
}

.COMZSVG{
  width: 18px;
  height: 18px;
  margin: 0 15px;
}

/* 评论排序 */
.plqh{
  height: 43px;
  border-bottom: 1px solid #e7e7e7;
  padding: 20px 0;
  display: flex;
  align-content: center;
}
.plk{
  display: flex;
  padding: 10px 5px;
  justify-content: flex-start;
}
.plks{
  display: flex;
  padding: 10px 5px 0 5px;
  justify-content: flex-start;
}
.user-tx>img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.user-img>img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
/* 评论输入框 */
.plsrk{
  width: 90%;
  justify-content: flex-start;
  margin-left: 20px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  //margin-top: 8px;
  background: #F1F2F3;;
}
.commentInputActive{
  transition: 0.3s;
  height: 90px;
  background: white;
}
.commentInput:hover{
  background: white;
}
.plfb{
  justify-content: flex-end;
  display: inline-block;
  line-height: 0px;
  margin-left: 30px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
}
/* 评论区 */
.content{
  padding: 5px;
  margin-top: 10px;
}
.contentOne{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-top: 10px;
}
.user-pl-zt{
  width: 100%;
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(206, 206, 206, 0.56);
}
.user-content-body{
  width: 100%;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}
.contentHF{
  width: 100%;
}
.contentBodyOne{
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 个性标签 */
.gxbq{
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 0;
  justify-content: flex-end;
}
.gxbq>img{
  width: 40px;
  height: 40px;
  border-radius: 50px;
}
.bh{
  font-family: "Oxanium";
  font-weight: bold;
  //font-size: 14px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  user-select: none;
}
.bh>p{
  margin: 0;
  display: inline-block;
  color: #00A1D6;
  position: relative;
  bottom: 0;
}
.user-pl-name{
  font-family: "黑体";
  //font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  display: flex;
  position: relative;
}

.jb{
  margin-left: auto;
  justify-content: end;
  display: none;
}
.comMsgBody{
  padding: 5px 0;
}
.comUpTime{
  display: flex;
  margin-top: 5px;
  align-items: center;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.mar-l-10{
  margin-left: 10px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.eom-show::-webkit-scrollbar {
  width: 8px;
  height: 6px
}
/*定义滚动条轨道*/
.eom-show::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
.eom-show::-webkit-scrollbar-thumb {
  background-color: #30B07F;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}
.eom-show{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
  overflow-y: auto;
}
.eom-span{
  padding: 4px 15px;
  background-color: #f7f7f7;
  margin: 3px 5px;
  border-radius: 4px;
  user-select: none;

}
.eom-table{
  display: flex;
  width: 100%;
  height: 30px;
  min-height: 30px;
  align-items: center;
  background-color: #f7f7f7;
  user-select: none;
}
.eom-table-one{
  padding: 5px 17px;
}
.eom-name{
  width: 100%;
  display: flex;
  height: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
}
.eom-table-bili-one{
  display: flex;
  align-items: center;
  padding: 5px 15px;
}
.eom-table-bili-one>img{
  width: 22px;
}
.eom-span-bili{
  padding: 4px 12px;
  background-color: #f7f7f7;
  margin: 3px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.eom-span-show:hover{
  box-shadow: 0 0.5px 3px #76767699;
}
.shakeBottom {
  -webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
.active{
  color: #18191C;
  font-family: "黑体";
  font-weight: bold;
}
.None{
  display: none;
}
.backW{
  background-color: white;
}
.textInputActive{
  cursor: not-allowed;
  pointer-events: none;
}
.stopClick{
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}
</style>
